<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的首页</title>
    <link rel="stylesheet" href="styles/index.css">
    <!-- 引入Element UI的CSS -->
    <link rel="stylesheet" href="plugins/element-ui/index.css" />
</head>
<body>
<div id="app" style="height: 100%; width: 100%; ">
    <el-container>
        <el-header style="background-color: #35424a; display: flex; align-items: center; justify-content: space-between; padding: 0 20px;">
            <h1 style="color: white; margin: 0;">我的首页</h1>
            <div>
                <!--https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif-->
                <el-avatar
                        :src="avatarUrl"
                        size="40"
                        style="margin-right: 20px;"
                        @click="openUserProfile"
                ></el-avatar>
                <el-button
                        icon="el-icon-refresh"
                        size="small"
                        style="color: white; background-color: transparent; border: none;"
                        @click="refreshContent"
                ></el-button>
                <el-button
                        icon="el-icon-switch-button"
                        size="small"
                        style="color: white; background-color: transparent; border: none;"
                        @click="logout"
                ></el-button>
            </div>
        </el-header>
        <el-container>
            <!-- 侧边栏 -->
            <!-- 这里可以根据用户角色显示不同的侧边栏内容，根据用户角色显示不同内容. -->
            <el-aside width="200px">
                <el-menu :default-active="activeIndex" @select="handleSelect">
                    <el-menu-item index="1" v-if="hasRole('USER') || hasRole('DELIVERY') || hasRole('ADMIN') || hasRole('MERCHANT')">首页</el-menu-item>
                    <el-menu-item index="2" v-if="hasRole('USER')|| hasRole('ADMIN') || hasRole('MERCHANT')">我的订单</el-menu-item>
                    <el-menu-item index="3" v-if="hasRole('ADMIN')">订单管理</el-menu-item>
                    <el-menu-item index="4" v-if="hasRole('ADMIN')">用户管理</el-menu-item>
                    <el-menu-item index="5" v-if="hasRole('ADMIN') || hasRole('MERCHANT')" >商品管理</el-menu-item>
                    <el-menu-item index="6" v-if="hasRole('USER')|| hasRole('ADMIN')">商品浏览与购买</el-menu-item>
                    <el-menu-item index="7" v-if="hasRole('DELIVERY')|| hasRole('ADMIN')">接单与派送</el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <iframe :src="currentPage" frameborder="0"></iframe>
            </el-main>
        </el-container>
        <el-footer>
            <p style="text-align: center; color: white;">© 2023 我的公司</p>
        </el-footer>
    </el-container>
</div>

<!-- 引入Element UI的JS -->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="plugins/axios/axios.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            activeIndex: '1', // 默认显示首页内容
            currentPage: 'pages/home/home.html', // 默认加载的页面
            avatarUrl: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif', // 默认头像
            userRole: '' // 用户角色，默认为空
        },
        created() {
            this.getUserRole();
            },
        methods: {
            getUserRole() {
                axios.get('/user/get_role').then(res => {
                    if (res.data=== null){
                        this.$message.error('请先登录！');
                        window.location.href = 'pages/login.html';
                    }
                    this.userRole = res.data; // 假设返回的用户角色数据在 res.data.role 中
                }).catch(err => {
                    console.log(err);
                });
            },
            hasRole(role) {
                return this.userRole.includes(role);
            },
            handleSelect(index) {
                this.activeIndex = index;
                switch (index) {
                    case '1':
                        this.currentPage = 'pages/home/home.html'; // 首页内容
                        break;
                    case '2':
                        this.currentPage = 'pages/orders/mylist.html'; // 我的订单
                        break;
                    case '3':
                        this.currentPage = 'pages/orders/list.html'; // 订单管理
                        break;
                    case '4':
                        this.currentPage = 'pages/user/list.html'; // 用户内容
                        break;
                    case '5':
                        this.currentPage = 'pages/product/pro_list.html'; // 商品管理
                        break;
                    case '6':
                        this.currentPage = 'pages/buy/show_list.html'; // 商品内容
                        break;
                    case '7':
                        this.currentPage = 'pages/delivery/list.html'; // 接取订单
                        break;
                    default:
                        this.currentPage = 'pages/home/home.html'; // 默认首页内容
                }
            },
            openUserProfile() {
                // 打开用户个人资料页面，您可以根据需求填写
                console.log('打开用户个人资料');
            },
            refreshContent() {
                // 刷新当前页面
                this.currentPage = this.currentPage; // 重新加载当前页面
            },
            logout() {
                // 处理退出登录逻辑
                axios.post('/user/login_out').then(res => {
                    window.location.href = '/backend/pages/login.html';
                }).catch(err => {
                    console.log(err);
                });
                console.log('退出登录');
                // 可进行页面跳转或者清理用户状态
            }
        }
    });
</script>
</body>
</html>